<template>
	<view>
		<view class="user-container">
			<view class="left">
				<u-image width="140rpx" height="140rpx" :src="avatar" shape="circle"></u-image>
				<view class="text" @click="showPopup">{{name || '点击登录'}}</view>
			</view>
			<u-icon :name="token ? 'close' : 'arrow-right'" @click="onClickIcon"></u-icon>
		</view>

		<u-popup v-model="popupVisible" mode="center" width="700rpx">
			<view class="form-container">
				<u-form :model="form" ref="uForm">
					<u-form-item label="姓名" prop="name">
						<u-input v-model="form.name" />
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u-input v-model="form.password" />
					</u-form-item>
					<u-button @click="submit">提交</u-button>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import goBackAfterLogin from '../../util/router.js'
	const DEFAULT_AVATAR =
		''
	export default {
		data() {
			return {
				avatar: DEFAULT_AVATAR,
				name: '',
				token: '',
				popupVisible: false,
				form: {
					name: '',
					password: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				},
			};
		},
		onShow() {
			// 每次进到页面，都要去缓存找token
			let token = uni.getStorageSync('token')
			let userInfo = uni.getStorageSync('userInfo')
			if (token && userInfo) {
				let {
					avatar,
					username
				} = userInfo
				this.token = token
				this.name = username
				this.avatar = avatar
			}
		},
		methods: {
			showPopup() {
				this.popupVisible = true
				// 渲染更新后的回调
				this.$nextTick(() => {
					// 设置校验规则
					this.$refs.uForm.setRules(this.rules);
				})
			},
			submit() {
				// 提交前校验

				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$request({
							url: 'auth/loginByWeb',
							method: 'POST',
							data: {
								pwd: this.form.password,
								username: this.form.name
							},
							successCb: res => {
								console.log(res)
								let {
									token,
									userInfo
								} = res

								uni.setStorageSync('token', token)
								uni.setStorageSync('userInfo', userInfo)
								this.popupVisible = false
								this.avatar = userInfo.avatar
								this.name = userInfo.username
								this.token = token

								goBackAfterLogin()
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			onClickIcon() {
				if (this.token) {
					// 二次确认
					uni.showModal({
						title: '提示',
						content: '确定要退出登录吗',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.clearStorageSync()
								this.token = ''
								this.name = ''
								this.avatar = ''
							}
						}
					});
				} else {
					// 弹出表单
					this.showPopup()
				}
			}
		}
	}
</script>

<style lang="scss">
	.user-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 20rpx;
		background: #333;
		color: #fff;

		.left {
			display: flex;
			align-items: center;

			.text {
				margin-left: 20rpx;
			}
		}
	}

	.form-container {
		padding: 50rpx;
	}
</style>
